/*
 * @Description: 图表模型js
 * @Author: Huang Junjie
 * @Date: 2021-10-20 21:51:40
 * @LastEditTime: 2021-10-20 21:55:48
 * @LastEditors: Huang Junjie
 */
// 引入echarts
const echarts = require('echarts');

// 接触网基础设备 - 柱状图
export function ColumnChart01(myChart, xAxisData, seriesData) {
  myChart.clear();
  myChart.setOption({
    grid: {
      top: 10,
      left: 10,
      right: 10,
      bottom: 10,
      containLabel: true
    },
    legend: {
      bottom: 0,
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 35,
      textStyle: {
        color: '#666666'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    // dataset: dataset,
    xAxis: {
      type: 'category',
      axisTick: {
        show: true,
        alignWithLabel: true,
        inside: true,
        lineStyle: {
          color: '#EBEBEB',
          width: 1,
          opacity: 1
        }
      },
      axisLabel: {
        interval: 0,
        rotate: 20,
        // formatter: function(value) {
        //   var ret = '' // 拼接加\n返回的类目项
        //   var maxLength = 2 // 每项显示文字个数
        //   var valLength = value.length // X轴类目项的文字个数
        //   var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
        //   if (rowN > 1) { // 如果类目项的文字大于4,
        //     for (var i = 0; i < rowN; i++) {
        //       var temp = '' // 每次截取的字符串
        //       var start = i * maxLength // 开始截取的位置
        //       var end = start + maxLength // 结束截取的位置
        //       // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
        //       temp = value.substring(start, end) + '\n'
        //       ret += temp // 凭借最终的字符串
        //     }
        //     return ret
        //   } else {
        //     return value
        //   }
        // },
        textStyle: {
          color: '#666666'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#EBEBEB',
          width: 1,
          opacity: 1
        }
      },
      data: xAxisData
    },
    yAxis: {
      show: true,
      // splitNumber: 4,
      min: 0,
      // max: 1000,
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#666666'
        }
      },
      axisLine: {
        lineStyle: {
          width: 0
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#EBEBEB',
          width: 1,
          opacity: 1
        }
      }
    },
    dataGroupId: '',
    animationDurationUpdate: 500,
    series: {
      type: 'bar',
      barWidth: '30px',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
            [
              { offset: 0, color: '#359CF9' },
              { offset: 1, color: '#54B2FC' }
            ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
          )
        }
      },
      data: seriesData
    }
  });

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, 500);
}
